<!-- 新增编辑车辆 -->
<template>
  <div>
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="110px"
        style="width: 100%"
        :model="formBase"
        :rules="ruleInVehicle"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeId"
        >
          <el-select
            v-model="formBase.truckTypeId"
            placeholder="请选择车辆类型"
          >
            <el-option
              v-for="item in carModelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <el-input
            v-model="formBase.licensePlate"
            placeholder="请输入车牌号码"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="GPS设备ID"
          prop="deviceGpsId"
        >
          <el-input
            v-model="formBase.deviceGpsId"
            placeholder="请输入GPS设备ID"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submitFn"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { truckTypeAdd } from '@/api/transit'
export default {
  name: 'VehicleAdd',
  props: {
    titleInfo: {
      type: String,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
    carModelList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 校验规则
      ruleInVehicle: {
        truckTypeId: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: 'blur'
          }
        ],
        licensePlate: [
          {
            required: true,
            message: '车牌号码不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/,
            message: '请输入正确格式的车牌号',
            trigger: 'blur'
          }
        ],
        deviceGpsId: [
          {
            required: true,
            message: 'GPS设备ID不能为空',
            trigger: 'blur'
          }
        ]
      },
      flag: true // 防止重复点击生成一下生成很多条相同的数据
    }
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    // 提交函数
    submitFn() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则是否合规
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const data = {
            licensePlate: this.formBase.licensePlate,
            deviceGpsId: this.formBase.deviceGpsId,
            truckTypeId: this.formBase.truckTypeId
          }
          await truckTypeAdd(data).then((res) => {
            if (String(res.code) === '200') {
              console.log(res)
              this.$message.success('新增车辆成功！')
            } else {
              this.$message.error(res.msg || '新增车辆失败')
            }
          }).catch((err) => {
            this.$message.error(err.msg || '新增车辆失败')
          })
          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()
          this.flag = true
        } else {
          this.flag = true
          this.$message.error('请按照提示填写')
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 40px 50px 0 20px !important;
}
.dialog-footer {
  .save-btn{
      background-color: #e15536;
      border: 1px solid #e15536;
      color: #fff;
    }
    .save-btn:hover{
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
}
</style>
